<template>
    <div ref="chart" class="chart-render-box"></div>
  </template>
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, ref } from 'vue'
  const props = defineProps({
    xData: {
      type: Array,
      default: () => [],
    },
    sData: {
      type: Array,
      default: () => [],
    },
    data1: {
      type: Array,
      default: () => [],
    },
    data2: {
      type: Array,
      default: () => [],
    },
    data3: {
      type: Array,
      default: () => [],
    },
  })
  const [startValue, endValue] = [0, 5]
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      top: '15%',
      left: '0%',
      right: '10%',
      bottom: '10%',
      containLabel: true,
    },
    legend: {
      // itemGap: 50,
      top: '1%',
      data: ['23.1-11', '22.1-11', '变化'],
      textStyle: {
        color: '#f9f9f9',
        borderColor: '#fff',
      },
    },
    // 控制显示几个柱子
    dataZoom: {
      show: false,
      startValue,
      endValue,
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        axisLine: {
          //坐标轴轴线相关设置。数学上的x轴
          show: false,
          lineStyle: {
            color: '#f9f9f9',
          },
        },
        axisLabel: {
          //坐标轴刻度标签的相关设置
          textStyle: {
            color: '#d1e6eb',
            margin: 15,
          },
        },
        axisTick: {
          show: false,
        },
        data: ['技术开发', '技术服务', '技术咨询', '技术转让', '技术许可'],
      },
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        // max: 140,
        splitNumber: 7,
        splitLine: {
          show: true,
          lineStyle: {
            color: '#0a3256',
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          // margin: 20,
          textStyle: {
            color: 'rgb(148,159,167)',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(108, 128, 151, 0.3)',
          },
        },
      },
      {
        type: 'value',
        // min: 0,
        // max: 140,
        splitNumber: 7,
        axisLine: {
          show: false,
        },
        axisLabel: {
          // margin: 20,
          textStyle: {
            color: 'rgb(148,159,167)',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: 'rgba(108, 128, 151, 0.3)',
          },
        },
      },
    ],
    series: [
      {
        name: '23.1-11',
        type: 'line',
        symbol: 'circle', //设定为实心点
        showAllSymbol: true,
        symbolSize: 7,
        smooth: true,
        itemStyle: {
          normal: {
            color: `#00CBFE`,
            lineStyle: {
              //线的颜色
              color: `#00CBFE`,
              width: 1.5,
            },
            areaStyle: {
              type: 'default',
              //渐变色实现
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, //变化度
                //三种由深及浅的颜色
                [
                  {
                    offset: 0,
                    color: 'rgba(1, 180, 255, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(1, 180, 255, 0.1)',
                  },
                ]
              ),
            },
          },
        },
        data: props.data1,

        yAxisIndex: 0,
      },
      {
        name: '22.1-11',
        type: 'line',
        symbol: 'circle', //设定为实心点
        symbol: 'emptyCircle',
        showAllSymbol: true,
        symbolSize: 7,
        smooth: true,
        itemStyle: {
          normal: {
            color: `#FFDF04`,
            lineStyle: {
              //线的颜色
              color: `#FFDF04`,
              width: 1.5,
            },
            areaStyle: {
              type: 'default',
              //渐变色实现
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, //变化度
                //三种由深及浅的颜色
                [
                  {
                    offset: 0,
                    color: 'rgba(255, 223, 4, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 223, 4, 0.1)',
                  },
                ]
              ),
            },
          },
        },
        data: props.data2,

        yAxisIndex: 0,
      },
      {
        name: '变化',
        type: 'line',
        symbol: 'circle', //设定为实心点
        symbol: 'emptyCircle',
        showAllSymbol: true,
        symbolSize: 7,
        smooth: true,
        itemStyle: {
          normal: {
            color: `#FF8F1F`,
            lineStyle: {
              //线的颜色
              color: `#FF8F1F`,
              width: 1.5,
            },
            areaStyle: {
              type: 'default',
              //渐变色实现
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1, //变化度
                //三种由深及浅的颜色
                [
                  {
                    offset: 0,
                    color: 'rgba(255, 223, 4, 0.2)',
                  },
                  {
                    offset: 1,
                    color: 'rgba(255, 223, 4, 0.1)',
                  },
                ]
              ),
            },
          },
        },
        data: props.data3,

        yAxisIndex: 1,
      },
    ],
  }
  // const option = {
  //     // backgroundColor: {
  //     //     type: 'linear',
  //     //     x: 0,
  //     //     y: 0,
  //     //     x2: 1,
  //     //     y2: 1,
  //     //     colorStops: [{
  //     //         offset: 0,
  //     //         color: '#0f2c70' // 0% 处的颜色
  //     //     }, {
  //     //         offset: 1,
  //     //         color: '#091732' // 100% 处的颜色
  //     //     }],
  //     //     globalCoord: false // 缺省为 false
  //     // },
  //     // title: {
  //     //     text: '品种',
  //     //     x: 'center',
  //     //     y: 'center',
  //     //     textStyle: {
  //     //         color: '#fff'
  //     //     }
  //     // },
  //     tooltip: {
  //         trigger: 'item',
  //         // borderColor: 'rgba(255,255,255,.3)',
  //         // backgroundColor: 'rgba(13,5,30,.6)',
  //         borderWidth: 1,
  //         padding: 5,
  //         formatter: function (parms) {
  //             var str = parms.marker + "" + parms.data.name + "</br>" +
  //                 "数量：" + parms.data.value + "</br>" +
  //                 "占比：" + parms.percent + "%";
  //             return str;
  //         }
  //     },
  //     legend: {
  //         // type: "scroll",
  //         // orient: 'vertical',
  //         // left: 'middle',
  //         // align: 'auto',
  //         // top: 'middle',
  //         bottom: 'bottom',
  //         width:'300px',
  //         textStyle: {
  //             color: '#fff'
  //         },

  //         data: ["未评价", "国内领先", "国际领先", "国际先进", "国内一般", "国内先进"]
  //     },
  //     series: [{
  //         type: 'pie',
  //         z: 3,
  //         center: ['50%', '40%'],
  //         radius: ['20%', '40%'],
  //         clockwise: true,
  //         avoidLabelOverlap: true,
  //         hoverOffset: 15,
  //         itemStyle: {
  //             normal: {
  //                 color: function (params) {
  //                     return ['#73DDFF', '#73ACFF', '#FDD56A', '#FDB36A', '#FD866A', '#9E87FF', '#58D5FF'][params.dataIndex]
  //                 }
  //             }
  //         },
  //         label: {
  //             show: true,
  //             position: 'outside',
  //             formatter: '{a|{b}：{d}%}\n{hr|}',
  //             normal: {
  //                     // position: 'top',
  //                     // fontSize: '24',
  //                     color: '#D8D8D8',
  //                 },
  //             rich: {
  //                 hr: {
  //                     backgroundColor: 't',
  //                     borderRadius: 3,
  //                     width: 3,
  //                     height: 3,
  //                     padding: [3, 3, 0, -12]
  //                 },
  //                 a: {
  //                     padding: [-30, 15, -20, 15]
  //                 }
  //             }
  //         },
  //         labelLine: {
  //             normal: {
  //                 length: 20,
  //                 length2: 30,
  //                 lineStyle: {
  //                     width: 1
  //                 }
  //             }
  //         },
  //         data: [{
  //             name: "未评价",
  //             value: "142.0"
  //         }, {
  //             name: "国内领先",
  //             value: "271.0"
  //         }, {
  //             name: "国际领先",
  //             value: "44.0"
  //         }, {
  //             name: "国际先进",
  //             value: "200.0"
  //         }, {
  //             name: "国内一般",
  //             value: "32.0"
  //         }, {
  //             name: "国内先进",
  //             value: "59.0"
  //         }]
  //     }, {
  //         name: '第一层环',
  //         type: 'pie',
  //         z: 2,
  //         tooltip: {
  //             show: false
  //         },
  //         center: ['50%', '40%'],
  //         radius: ['40%', '50%'],
  //         hoverAnimation: false,
  //         clockWise: false,
  //         itemStyle: {
  //             normal: {
  //                 // shadowBlur: 40,
  //                 // shadowColor: 'rgba(0, 255, 255,.3)',
  //                 color: 'rgba(1,15,80,.4)',
  //             },
  //             emphasis: {
  //                 color: 'rgba(1,15,80,.4)',
  //             }
  //         },
  //         label: {
  //             show: false
  //         },
  //         data: [100]
  //     }, {
  //         name: '第二层环',
  //         type: 'pie',
  //         z: 1,
  //         tooltip: {
  //             show: false
  //         },
  //         center: ['50%', '40%'],
  //         radius: ['50%', '70%'],
  //         hoverAnimation: false,
  //         clockWise: false,
  //         itemStyle: {
  //             normal: {
  //                 // shadowBlur: 40,
  //                 // shadowColor: 'rgba(0, 255, 255,.3)',
  //                 color: 'rgba(2,60,85,.2)',
  //             },
  //             emphasis: {
  //                 color: 'rgba(2,60,85,.2)',
  //             }
  //         },
  //         label: {
  //             show: false
  //         },
  //         data: [100]
  //     }]
  // }
  const chart = ref()
  let timer1 = null
  onMounted(() => {
    chart.value.removeAttribute('_echarts_instance_')
    const myChart = echarts.init(chart.value)
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      // 在窗口尺寸变化时重新刷新图表
      myChart.resize()
    })
    // 使用定时器
    timer1 = setInterval(() => {
      // debugger;
      const item1 = props.data1.shift()
      props.data1.push(item1)
      const item2 = props.data2.shift()
      props.data2.push(item2)
      const item3 = props.data3.shift()
      props.data3.push(item3)
      // console.log('@props ', props)
      myChart.setOption({
        series: [
          {
            data: props.data1,
            type: 'line',
          },
          {
            data: props.data2,
            type: 'line',
          },
          {
            data: props.data3,
            type: 'line',
          },
        ],
        // xAxis: {
        //   type: 'category',
        //   data: props.xData,
        // },
      })
    }, 2000)
  })
  </script>
  <style scoped lang="scss">
  .chart-render-box {
    width: 100%;
    height: 100%;
    flex: 1;
  }
  </style>
